$(function () {
    var str = ``;
    var ne = 'new';
    // var ho = 'hot';
    var cat = 'category'
    var morebtn = document.querySelector(".clickmore")
    $(".estbox div").on("click", function () {
        $(this).siblings().removeClass("orange");
        $(this).addClass("orange");
    })
    getdata(ne);
    $(".newest").on("click", function () {
        morebtn.style.display = "block";
        ne = 'new';
        getdata(ne);
    })
    $(".hotest").on("click", function () {
        morebtn.style.display = "block";
        ne = 'hot';
        getdata(ne);
    })
    function getdata(new_hot) {
        $.ajax({
            url: `http://localhost:3000/play/${new_hot}`,//请求地址
            type: 'get',//请求方式
            success(reg) {
                $.each(reg, function (index, ele) {
                    $.each(reg[0], function (ind, ele) {
                        str += `
                <div class="item item2">
                <img src="${reg[index][ind].img}" alt="">
                <h6>SCIO ${reg[index][ind].description}</h6>
                <p>${reg[index][ind].text}</p>
                <span class="price">${reg[index][ind].price}</span>
                <div class="like_marke">
                    <div class="like">
                        <span class="font12 palm">点赞${reg[index][ind].like}</span>
                        <span class="font12 palm">评论${reg[index][ind].words}</span>
                        <div class="bar1"></div>
                        <div class="bar2"></div>
                    </div>
                </div>
            </div>
                `
                    })
                })
                $(".main").html(str);
                $(".item").on("mouseover", function () {
                    $(this).addClass("deepshadow")
                })
                $(".item").on("mouseleave", function () {
                    $(this).removeClass("deepshadow")
                })
            }
        })
        $(".clickmore").on("click", function () {
            getdata(new_hot);
        })
    }
    function getsort(category) {
        $(".sort").on("click", function () {
            $(".main").empty();
            morebtn.style.display = "none";
            let str = ``;
            sor();
            function sor() {
                $.ajax({
                    url: `http://localhost:3000/play/${category}`,//请求地址
                    type: 'get',//请求方式
                    success(reg) {
                        console.log(reg);
                        // 循环生活、个人护理、智能穿戴、出行、运动户外、数码家电大盒子
                        for (var i = 0; i < reg.length; i++) {
                            str += `
                <div class="life">
                    <div class="top">
                        <div class="floatred"></div>
                        <div class="move">${reg[i].title}</div>
                    </div>
                    <div class="cirbox">
                `
                            //以上是各个盒子的标题，下边是每循环一次大盒子就把圆形图片循环打印一遍
                            $(".main").html(str);
                            var b = 0;
                            for (var a = 0; a < reg[i].list.length; a++) {
                                console.log(reg);
                                if (b > 10) {
                                    b = 4;
                                }
                                str += `
                        <div class="circlebox">
                            <div class="circ">
                                <img src="images/cat_${b + 1}.png" alt="">
                            </div>
                            <p>${reg[i].list[a].productName}( <span>${reg[i].list[a].nums}</span> )</p>
                        </div>
                    `;
                                b++
                            }
                            $(".main").html(str);
                            str += `
                    </div>
                    <div class="under">
                    `
                            // 循环打印每个大盒子的商品名字
                            for (var a = 0; a < reg[i].list.length; a++) {
                                str += `
                        <div class="ite">${reg[i].list[a].productName}( <span>${reg[i].list[a].nums}</span> )
                    </div>
                    `;
                            }
                            str += `
                    </div>
                </div >`;
                        }
                        $(".main").html(str);
                    }
                })
            }
        })
    }
    getsort(cat)
})